<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>详情</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        body{
            /*
            background: #F6F6F6;*/
            background: #fff;
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
            overflow: hidden;
            
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        header{
            background-color: #fff !important;
        }
        section{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }
        .container {
            width: 100%;/**/
            height: fit-content;
            overflow: scroll;
            position: relative;
            flex-direction: column;
            align-items: center;
        }

        .body .text{
            box-sizing: border-box;
            padding: .1208rem .3623rem;
            font-size: .3937rem;
            /* max-height: 2.4155rem; */
            line-height: .5556rem;
            height: fit-content;
            background: #fff;
            word-break: break-all;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            /* -webkit-box-orient: vertical; */
            overflow: hidden;  
            /* 保留空格和换行 */
            white-space: pre-wrap;

        }
    </style>
    <link rel="stylesheet" href="../../../../../css/header.css">
    <link rel="stylesheet" href="../../../css/container.css">
    <link rel="stylesheet" href="./css/addStyle.css">
    <link rel="stylesheet" href="./css/comments.css">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" referrerpolicy="no-referrer"/>
    <script src="../../../../../lib/vue.js"></script>
    <script src="../../../../../lib/axios.js"></script>
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">详情</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
        <!-- 问题详情 -->
        <div class="container" id="container">
            <ul class="articleList guangchang" id="articleList" >
                <!-- <li v-for="(article_data, index) of article_data" :key="index" :index="index"> -->
                <li v-for="(item, index) of article_data" :key="index" :index="index">
                    <!-- title -->
                    <div class="title">{{item.article.title}}</div>
                    <!-- author Info -->
                    <div class="top">
                        <div class="left">
                            <div class="userImg">
                                <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../../../../images/person/person_senter/defaultUserImg.webp'" alt="">
                            </div>
                            <div class="info">
                                <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                <span class="dept" :style="(item.author.realInfo !== undefined && item.author.realInfo.院校==='官方') ? {background: '#2493f1', color: '#fff', padding:'0 .1691rem', 'font-weight': '600', 'border-radius': '.2415rem'}:{}">{{(item.author.realInfo === undefined) ? '未认证' : item.author.realInfo.院校}}</span>
                                
                            </div>
                        </div>
                        <!-- 过滤器处理时间 -->
                        <div class="right">
                            {{item.article.time | handleTime}}<br>
                            <div class="ipAddress">{{item.ipAddress_province}}</div>
                        </div>
                    </div>
    
                    <div class="body">
                        <div class="text"></div>
                        <div class="imgList" v-show="(item.article.images.length !== 0)">
                            <!-- <img :src="article_data.article.images[0]" alt="" @click.stop="imagePreview($event)"> -->
                            <img :src="item.article.images[0]" alt="" @click.stop="imagePreview(item.article.images)">
                            <div class="n" v-show="item.article.images.length === 1 ? false : true">共{{item.article.images.length}}张</div>
                        </div>
                        <div class="other" v-show="((('address' in item) === true && item.address !== '') || item.topic.length > 0) && (item.type != '2')">
                            <div class="topic">
                                <a v-for="val in item.topic" href="#" @click.stop="searchTopic(val)"><strong>#{{val}}</strong>&nbsp;</a>
                            </div>
                            <div class="position" v-show="('address' in item) === true && item.address !== ''" @click.stop="searchTopic(item.address)">
                                <div class="dwIcon"></div>
                                <span>{{item.address}}</span>
                            </div>
                        </div>
                    </div>
    
                    <div class="bottom">
                        <div class="comments">
                            <div class="icon"></div>
                            <span class="commentsNum">{{item.comments}}</span>
                        </div>
                        <div class="likes" @click="like()">
                            <!-- background: url(./img/likes-active.webp) no-repeat -->
                            <div class="icon" :style="item.isLike ? {backgroundImage: 'url(../../../img/likes-active.webp)'} : {backgroundImage: 'url(../../../img/likes.webp)'}"></div>
                            <!-- <div class="icon" :style="{backgroundImage: article_data._id}"></div> -->
                            <span class="likesNum">{{item.likes}}</span>
                        </div>
                        <div class="jb" @click="report()"></div>
                    </div>
                    <div class="commentLists">
                        <div class="comments" v-for="(item, index) of article_comments" :key="index" :k="item._id">
                            <div class="userImg">
                                <img :src="(item.author.userImg !== '') ? item.author.userImg : '../../../../../images/person/person_senter/defaultUserImg.webp'" alt="">
                            </div>
                            <div class="info">
                                <span class="name">{{(item.author.name === "") ? '无名用户' : item.author.name}}</span>
                                <div class="msg">{{item.body}}</div>
                                <div class="time likes">
                                    <div class="left">
                                        <span>
                                            回答于&nbsp;{{item.time | handleTime}}
                                        </span>
                                    </div>
                                    <div class="right">
                                        <div class="Icon" @click="good(item._id)" :style="item.isLike ? {backgroundImage: 'url(../../../img/good-active.webp)'} : {backgroundImage: 'url(../../../img/good.webp)'}"></div>
                                        <span>{{(item.likes > 0) ? item.likes : 0}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                
            
                
            </ul>
        </div>
        <!-- 图片预览组件 -->
        <van-image-preview v-model="show" :images="images" @change="onChange">
        </van-image-preview>
        <!-- 输入框 -->
        <div class="nav">
            <input type="text" @input="checkInput()" v-model="userMsg" name="" id="myInput" placeholder="说点什么吧...">
            <button @click="send()" :disabled="dis" :style="(dis===true) ? {opacity:'0.5'}:{opacity:'1'}"></button>
        </div>
    </section>
    <style>
        
        .top .name{
            color: #576b95;
            max-width: 3.6232rem;
        }
        .top .right{
            flex-direction: column !important;
            align-items: flex-end !important;
        }
        .bottom{
            position: relative;
        }
        .ipAddress{
            font-size: .314rem;
            color: #a1a1a1;
            margin: .0242rem 0;
        }
    </style>




    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js" referrerpolicy="no-referrer"></script>
    <script src="./js/main.js"></script>





    <script>
        function resetHtmlFont(){
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        resetHtmlFont();
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>